<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>component std02</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
        <component-a></component-a><component-b></component-b><br>
	</div>
<script>
    (function () {
        var eventHub = new Vue();
        Vue.component('component-a',{
            template: '<button v-on:click="aclick">addPropB</button>',
            methods:{
                aclick:function () {
                    eventHub.$emit('click-a');
                }
            }
        });
        Vue.component('component-b',{
            /**
             * props由父组件传递过来的参数，不能在当前组件修改，否则会有：
             * Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders....异常,
             * vue建议数据的只能在数据源头定义修改方法。
             */
            props:{
                propB:{
                    type:Number,
                    default:0
                }
            },
            data:function () {
              return{dataB:0};
            },
            template: '<div><label>component-b:{{ propB }},{{dataB}}</label></div>',
            created:function () {
                var that = this;
                eventHub.$on('click-a',function () {
                    that.changeDataB();
                    /**执行changePropB方法会有Avoid mutating a prop.....异常*/
                    /*that.changePropB();*/
                });
            },
            methods:{
                changePropB:function () {
                    this.propB +=1;
                },
                changeDataB:function () {
                    this.dataB +=1;
                }
            }
        });

    })();

	new Vue({
		el: '#app',
		data: {
		}
	});
</script>
</body>
</html>